<template>
  <s-layout title="详情" :bgStyle="{ color: '#fff' }">
    <view class="news-title">{{ state.details.title }}</view>
    <view class="ss-flex gray ss-p-x-20">
      <view>{{ state.details.author }}</view>
      <view class="ss-p-x-30">{{ state.details.createtime }}</view>
    </view>
    <view class="news-content" v-html="state.details.content" />
  </s-layout>
</template>

<script setup>
import { reactive } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";

const state = reactive({
  newsId: "", // 文章ID
  details: {}, // 文章详情
});

// 获取详情
function getDetail() {
  sheep.$api.news.newsDetail(state.newsId).then((res) => {
    if (res.code == 1) {
      state.details = res.data;
    }
  });
}

onLoad((e) => {
  state.newsId = e.id;
  getDetail();
});
</script>

<style lang="scss" scoped>
.news-title {
  font-size: 40rpx;
  padding: 20rpx;
}
.gray {
  font-size: 26rpx;
  color: #979797;
}
.news-content {
  padding: 20rpx;
}
</style>
